<template>
    <div class="orderShipDetail">
       <div class="shipHeader page-pad-pk bg-white-pk list-item-pad-pk font-size-13-pk">
           <div class="d-flex-pk">
               <div class="pad-right-ship text-gray-b3-pk">物流公司:</div>
               <div class="text-red-pk">中通快递</div>
           </div>
           <div class="d-flex-pk">
               <div class="pad-right-ship text-gray-b3-pk">快递单号:</div>
               <div class="pad-right-ship text-gray-b3-pk">32141325</div>
               <div class="copyBorder text-gray-deep-pk">复制</div>
           </div>
           <div class="d-flex-pk">
               <div class="pad-right-ship text-gray-b3-pk">物流电话:</div>
               <div class="phoneNum">32141325</div>
           </div>
       </div>
        <div class="shipInfo">
            <div class="font-size-15-pk text-black-pk bg-white-pk page-pad-pk title">物流状态</div>
            <div class="shipList font-size-13-pk">
                <van-steps direction="vertical"
                           :active="shipList.length-1"
                           active-color="#D82D11">
                    <van-step v-for="(s,k) in shipList" :key="k">
                        <div>shipList</div>
                        <div>2016-07-10 09:30</div>
                    </van-step>
                </van-steps>
            </div>
        </div>
        <div class="recommend page-pad-pk bg-white-pk list-item-pad-pk">
            <div class="like text-center-pk font-size-15-pk text-red-pk">你可能还喜欢</div>
            <div class="goodsList pad-top-item d-flex-pk">
                <div v-for="(item,k) in goodsInfoList" :key="k"
                     @click="handleGoodsDetail(item)"
                     class="width-47">
                    <div>
                        <img :src="item.goodsThumb" alt="" class="goodsImg">
                    </div>
                    <div class="goodsInfo">
                        <div class="pad-top-item font-size-14-pk goodsName">{{item.goodsName}}</div>
                        <div class="d-flex-pk font-size-11-pk pad-top-item ">
                            <div class="price text-red-pk">￥{{item.originalPrice}}</div>
                            <div class="buyNum text-over">{{item.salesNum}}已购</div>
                            <div>
                                <img src="../../assets/images/car.png" class="carImg">
                            </div>
                        </div>
                    </div>
                    <div class="d-flex-pk shareItem font-size-11-pk text-red-pk">
                        <div class="share">分享赚</div>
                        <div>{{item.saleReward}}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        name:"orderShipDetail",
        title:"查看物流",
        data(){
            return{
                shipList:[1,2,3],
                normalPage : 1,
            }
        },
        created() {
            this.getGoodsInfoList(this.normalPage)
        },
        methods:{
            //商品列表
            getGoodsInfoList(normalPage){
                this.$api.getGoodsInfoList({
                    beGroup: 0,
                    page: normalPage,
                    size: 10
                }).then(res => {
                    let result=this.$resArr(res);
                    if (result) {
                        this.goodsInfoList = this.goodsInfoList.concat(result.list);
                    }
                });
            },
        }
    }
</script>
<style lang="scss" scoped>
    .orderShipDetail{
        line-height: 2;
        .pad-right-ship{
            padding-right: 10px;
        }
        .shipHeader{
            .copyBorder{
                border:1px solid rgba(204,204,204,1);
                border-radius:2px;
                padding:0 4px;
            }
            .phoneNum{
                color: #08AED7;
            }
        }
        .shipInfo{
            margin-top: 10px;
            .shipList{
            }
            .title{
                padding-top: 10px;
            }
        }
        .recommend{
            margin-top: 10px;
            .goodsList{
                .width-47{
                    width: 47%;;
                }
                flex-wrap: wrap;
                justify-content: space-between;
                flex-direction: row;
                .goodsImg{
                    width: 170px;
                    height: 170px;
                    border-radius:4px 4px 0px 0px;
                }
                .goodsInfo{
                    padding: 5px;
                    align-items: center;
                    .price{
                        padding-right: 5px;
                    }
                    .buyNum{
                        flex-grow: 1;
                        color: #B3B3B3;
                    }
                    .carImg{
                        width: 18px;
                        height: 16px;
                    }
                    .goodsName{
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        overflow: hidden;
                    }
                    .text-over{
                        white-space: nowrap;
                        overflow: hidden;
                    }
                }
                .shareItem{
                    justify-content: space-between;
                    background:rgba(253,206,198,1);
                    border-radius:0px 0px 4px 4px;
                    padding: 5px;
                    margin: 10px 0;
                    .share{
                        flex-grow: 1;
                    }
                }


            }
        }
    }
</style>
